<template>
<div>
  <a-modal
      v-model:visible="editRoleFormVisible"
      title="添加角色"
      :confirm-loading="editRoleFormConfirmLoading"
      @ok="updateRole"
  >
    <div class="form_box">
      <a-form
          :model="formState"
          v-bind="layout"
          name="nest-messages"
          :validate-messages="validateMessages"
          ref="roleForm"
      >
        <a-form-item :name="['role', 'roleName']" label="角色名称" :rules="[{ required: true }]">
          <a-input v-model:value="formState.role.roleName"/>
        </a-form-item>
      </a-form>

    </div>

  </a-modal>
</div>
</template>

<script>
import {reactive, ref} from "vue";
import {getRoleList, updateById} from "@/apis/role";
import {message} from "ant-design-vue";

export default {
  name: "EditRoleForm",
    setup(props, ctx) {
      const editRoleFormVisible = ref(false)
      const editRoleFormConfirmLoading = ref(false)

      const layout = {
        labelCol: {
          span: 5,
        },
        wrapperCol: {
          span: 16,
        },
      };
      const validateMessages = {
        required: '${label} is required!',
        types: {
          email: '${label} is not a valid email!',
          number: '${label} is not a valid number!',
        },
        number: {
          range: '${label} must be between ${min} and ${max}',
        },
      };
      const formState = reactive({
        role: {
          roleId: '',
          roleAuth: ''
        }
      })

      const init = (row)=>{
        formState.role.roleId = row.roleId
        formState.role.roleName = row.roleName
        visible()
      }

      const visible = () => {
        editRoleFormVisible.value = true;
      }

      const updateRole = () => {
        editRoleFormConfirmLoading.value = true;
        setTimeout(() => {
          editRoleFormVisible.value = false;
          editRoleFormConfirmLoading.value = false;
          updateById(formState.role).then(res=>{
            if (res.data === true) {
              getRoleList().then(res=>{
                ctx.emit('updateRoleList',res.data)
              })
              message.success("更新成功")
            }
          })

        }, 2000);
      }

      return{
        visible,
        formState,
        validateMessages,
        editRoleFormConfirmLoading,
        editRoleFormVisible,
        layout,
        updateRole,
        init,
      }
  },
}
</script>

<style scoped>

</style>